<template>
    <div class="home">
        <!-- <img alt="Vue logo" src="../assets/logo.png" />
        <HelloWorld msg="Welcome to Your Vue.js App" /> -->
        <!-- 欢迎页 -->
        <div class="screen_1">
            <div class="bg_box">
                <div class="bg_item" v-show="show_bg==1">
                    <img class="bg_item_img" src="@/assets/imgs/resume_slide1.jpg" alt="">
                </div>
                <div class="bg_item" v-show="show_bg==2">
                    <img class="bg_item_img" src="@/assets/imgs/resume_slide2.jpg" alt="">
                </div>
                <div class="bg_item" v-show="show_bg==3">
                    <img class="bg_item_img" src="@/assets/imgs/resume_slide3.jpg" alt="">
                </div>
            </div>
            <div class="content">
                <!-- <h1>Hello I am ChenJiaxin</h1>
                <h3>一名前端工程师</h3>
                <h5>学习是一件充实而又愉快的过程，期待新鲜事物既前端即兴趣</h5> -->
                <img class="avater" src="@/assets/imgs/head.jpg" alt="">
                <h1 class="title_1">Hello I am ChenJiaxin</h1>
                <p class="title_2">一名前端工程师</p>
                <p class="title_3">学习是一件充实而又愉快的过程，期待新鲜事物既前端即兴趣</p>
            </div>
        </div>

        <!-- 主页 个人简介 -->
        <header class="header">
            <div class="left"></div>
            <div class="right">
                <div class="item">个人简介</div>
                <div class="item">职业技能</div>
                <div class="item">工作经验</div>
                <div class="item">项目经验</div>
                <div class="item">个人作品</div>
                <div class="item">留言板</div>
            </div>
        </header>
        <div class="introduce">
            <TitleHeader title="个人简介" alias="-PROFILE-"></TitleHeader>
            <div class="content module-content">
                <div class="item">
                    <div class="circular">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-basic-information"></use>
                        </svg>
                    </div>
                    <h2>基本信息</h2>
                    <div class="item_text">姓名：陈家新</div>
                    <div class="item_text">籍贯：江西~赣州</div>
                </div>
                <div class="item">
                    <div class="circular">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-_zhichangjineng"></use>
                        </svg>
                    </div>
                    <h2>职场</h2>
                    <div  class="item_text">职业：前端工程师</div>
                    <div class="item_text">开发年限：3年</div>
                </div>
                <div class="item">
                    <div class="circular">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-lianxifangshi"></use>
                        </svg>
                    </div>
                    <h2>联系方式</h2>
                    <div class="item_text">电话：18870279986</div>
                    <div class="item_text">邮箱：1839479647@qq.com</div>
                </div>
            </div>
        </div>

        <!-- 职业技能  第三屏 -->
        <div class="skill">
            <TitleHeader title="职业技能" alias="-SKILL-" color="#F4D03F"></TitleHeader>
            <ul class="content module-content">
                <li class="item" v-for="skill in skills" :key="skill.id">
                    <div class="just">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use :xlink:href="skill.icon"></use>
                        </svg>
                        <h2 class="title">{{skill.name}}</h2>
                    </div>
                    <div class="back">
                        <ul>
                            <li v-for="des in skill.describes" :key="des.id">{{des.content}}</li>
                            
                        </ul>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 第四屏 工作经验 -->
        <div class="experience">
            <TitleHeader title="工作经验" alias="-WORK EXPERIENCE-"></TitleHeader>
            <div class="content module-content">
                <ul>
                    <li v-for="(work, index) in works" :key="work.id">
                        <div class="left">
                            <div class="wrapper"  v-show="index%2 != 0">
                                <i class="arrow"></i>
                                <h3>{{ work.name }}</h3>
                                <p>{{work.time}} : 在职时间</p>
                                <p>{{ work.post }} : 职位</p>
                                <ul>
                                    <li v-for="des in work.describes" :key="des.id">{{ des.content }}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="center">
                            <div class="circular">
                                <svg class="icon-mini" aria-hidden="true">
                                    <use xlink:href="#icon-jiaoyin"></use>
                                </svg>
                            </div>
                            <div class="line"></div>
                        </div>
                        <div class="right">
                            <div class="wrapper" v-show="index%2 == 0">
                                <i class="arrow"></i>
                                <h3>{{ work.name }}</h3>
                                <p>在职时间 : {{work.time}}</p>
                                <p>职位 : {{ work.post }}</p>
                                <ul>
                                    <li v-for="des in work.describes" :key="des.id">{{ des.content }}</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>

        <!-- 第五屏 项目经验 -->
        <div class="project">
            <TitleHeader title="项目经验" alias="-PROJECT EXPERIENCE-"></TitleHeader>
            
            <div class="content module-content-pro">
                <div class="tabs">
                    <div class="tab active">所有</div>
                    <i class="line"></i>
                    <div class="tab">PC</div>
                    <i class="line"></i>
                    <div class="tab">h5</div>
                    <i class="line"></i>
                    <div class="tab">手机APP</div>
                    <i class="line"></i>
                    <div class="tab">微信小程序</div>
                </div>
                <ul class="ul">
                    <li class="li" v-for="preject in prejects" :key="preject.id">
                        <img class="cover" src="@/assets/imgs/preject-lomo.png" />
                        <div class="mask">
                            <ul class="preject-des">
                                <li class="item">项目名称: {{preject.name}}</li>
                                <li class="item">技术栈：{{preject.skill}}</li>
                                <li class="item">
                                    项目描述: 
                                    <p>{{preject.describe}}</p>
                                </li>
                                <li class="item">负责内容：
                                    <ul class="des-list">
                                        <li class="des-item" v-for="rep in preject.respons" :key="rep.id">{{rep.content}}</li>
                                    </ul>
                                </li>
                            </ul>
                            
                        </div>
                    </li>
                    
                </ul>
            </div>

        </div>

        <!-- 第六屏 个人作品 -->
        <div class="works">
            <TitleHeader title="个人作品" alias="-PERSONAL WORKS-"></TitleHeader>
            <div class="content module-content">
                <ul class="ul">
                    <li class="li" v-for="preject in prejects" :key="preject.id">
                        <img class="cover" src="@/assets/imgs/preject-lomo.png" />
                        <div class="mask">
                           <h3 class="title">原生js实现贪吃蛇小游戏</h3> 
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 第七屏 留言板 -->
        <div class="board"></div>



    </div>
</template>

<script>
// @ is an alias to /src
import TitleHeader from "@/components/TitleHeader.vue";
export default {
    name: "Home",
    components: {
        TitleHeader
    },
    data () {
        return {
            show_bg: 1,//显示背景图 序号
            time_id: "",
            icon: "#icon-html",
            //职业技能数据
            skills: [
                {
                    id: 1,
                    name: "HTML",
                    icon: "#icon-html",
                    describes: [
                        {
                            id: 111,
                            content: "熟练运用HTML及HTML5语义化标签",
                        },
                        {
                            id: 112,
                            content: "熟悉html标签权重性，",
                        },
                        {
                            id: 113,
                            content: "会使用合适的标签及标签属性做SEO搜索引擎优化"
                        }
                    ]
                },
                {
                    id: 2,
                    name: "CSS",
                    icon: "#icon-css",
                    describes: [
                        {
                            id: 201,
                            content: "熟练运用HTML及HTML5语义化标签",
                        },
                        {
                            id: 202,
                            content: "熟悉html标签权重性，",
                        },
                        {
                            id: 203,
                            content: "会使用合适的标签及标签属性做SEO搜索引擎优化"
                        }
                    ]
                },
                {
                    id: 3,
                    name: "JS",
                    icon: "#icon-js",
                    describes: [
                        {
                            id: 301,
                            content: "熟练运用HTML及HTML5语义化标签",
                        },
                        {
                            id: 302,
                            content: "熟悉html标签权重性，",
                        },
                        {
                            id: 303,
                            content: "会使用合适的标签及标签属性做SEO搜索引擎优化"
                        }
                    ]
                },
                {
                    id: 4,
                    name: "VUE",
                    icon: "#icon-Vue",
                    describes: [
                        {
                            id: 401,
                            content: "熟练运用HTML及HTML5语义化标签",
                        },
                        {
                            id: 402,
                            content: "熟悉html标签权重性，",
                        },
                        {
                            id: 403,
                            content: "会使用合适的标签及标签属性做SEO搜索引擎优化"
                        }
                    ]
                },
                {
                    id: 5,
                    name: "React",
                    icon: "#icon-React",
                    describes: [
                        {
                            id: 501,
                            content: "熟练运用HTML及HTML5语义化标签",
                        },
                        {
                            id: 502,
                            content: "熟悉html标签权重性，",
                        },
                        {
                            id: 503,
                            content: "会使用合适的标签及标签属性做SEO搜索引擎优化"
                        }
                    ]
                },
                {
                    id: 6,
                    name: "Node.js",
                    icon: "#icon-Nodejs",
                    describes: [
                        {
                            id: 601,
                            content: "熟练运用HTML及HTML5语义化标签",
                        },
                        {
                            id: 602,
                            content: "熟悉html标签权重性，",
                        },
                        {
                            id: 603,
                            content: "会使用合适的标签及标签属性做SEO搜索引擎优化"
                        }
                    ]
                },
                {
                    id: 7,
                    name: "uni-app",
                    icon: "#icon-APP",
                    describes: [
                        {
                            id: 701,
                            content: "熟练运用HTML及HTML5语义化标签",
                        },
                        {
                            id: 702,
                            content: "熟悉html标签权重性，",
                        },
                        {
                            id: 703,
                            content: "会使用合适的标签及标签属性做SEO搜索引擎优化"
                        }
                    ]
                },
            ],
            //工作经验
            works: [
                {
                    id: 3,
                    name: "深圳蚁人智能网络有限公司",
                    time: "2020-06 ~ 2020-09",
                    post: "前端工程师",
                    describes: [
                        {
                            id: 301,
                            content: "在公司做了啥事",
                        },
                        {
                            id: 302,
                            content: "在公司做了哪些类型的项目",
                        },
                        {
                            id: 303,
                            content: "做的效果怎么样",
                        },
                    ]
                },
                {
                    id: 2,
                    name: "深圳市戮默科技有限公司",
                    time: "2019-09 ~ 2020-06",
                    post: "前端工程师",
                    describes: [
                        {
                            id: 201,
                            content: "在公司做了啥事",
                        },
                        {
                            id: 202,
                            content: "在公司做了哪些类型的项目",
                        },
                        {
                            id: 203,
                            content: "做的效果怎么样",
                        },
                    ]
                },
                {
                    id: 1,
                    name: "南昌亿宸科技有限公司",
                    time: "2018-03 ~ 2019-09",
                    post: "前端工程师",
                    describes: [
                        {
                            id: 101,
                            content: "在公司做了啥事",
                        },
                        {
                            id: 102,
                            content: "在公司做了哪些类型的项目",
                        },
                        {
                            id: 103,
                            content: "做的效果怎么样",
                        },
                    ]
                },
            ],
            //项目
            prejects: [
                {
                    type: 1,
                    id: 1,
                    name: "戮默云",
                    skill: "Vue.js、uni-app",
                    describe: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                    respons: [
                        {id: 111,content: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"},
                        {id: 112,content: "XXXXXXXXXXXXXXXXXXXXXXXX"},
                    ]
                },
                {
                    type: 1,
                    id: 2,
                    name: "戮默云",
                    skill: "Vue.js、uni-app",
                    describe: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                    respons: [
                        {id: 211,content: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"},
                        {id: 212,content: "XXXXXXXXXXXXXXXXXXXXXXXX"},
                    ]
                },
                {
                    type: 1,
                    id: 3,
                    name: "戮默云",
                    skill: "Vue.js、uni-app",
                    describe: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                    respons: [
                        {id: 311,content: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"},
                        {id: 312,content: "XXXXXXXXXXXXXXXXXXXXXXXX"},
                    ]
                },
                {
                    type: 1,
                    id: 4,
                    name: "戮默云",
                    skill: "Vue.js、uni-app",
                    describe: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                    respons: [
                        {id: 411,content: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"},
                        {id: 412,content: "XXXXXXXXXXXXXXXXXXXXXXXX"},
                    ]
                },
                {
                    type: 1,
                    id: 5,
                    name: "戮默云",
                    skill: "Vue.js、uni-app",
                    describe: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                    respons: [
                        {id: 511,content: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"},
                        {id: 512,content: "XXXXXXXXXXXXXXXXXXXXXXXX"},
                    ]
                },
            ]
        }
    },
    created () {

    },
    mounted () {
        this.time_id = setInterval(() => {
            this.show_bg++;
            this.show_bg = this.show_bg > 3 ? 1 :  this.show_bg;
        }, 12000);
    },
    destroyed () {
        clearInterval(this.time_id);
    },
    methods: {

    }
};
</script>

<style lang="less" scoped>
.home {
    .screen_1 {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        p {
            text-align: center;
            color: #ffffff;
        }
        .bg_box {
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            .bg_item {
                width: 100%;
                height: 100%;
                // transform: scale(1);
                overflow: hidden;
                
                .bg_item_img {
                    width: 100%;
                    height: 100%;
                    vertical-align: top;
                    object-fit: cover;
                    animation: bgScale 4s infinite alternate;
                    @keyframes bgScale {
                    from {
                        transform: scale(1);
                    }
                    to {
                        transform: scale(1.2);
                    }
                }
                }
                
            }
        }
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
            .avater {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                margin-bottom: 18px;
            }
        }
        .title_1 {
            // font-size: 30px;
            color: #FFF;
        }
        .title_2 {
            font-size: 28px;
            margin: 12px 0;
        }
        .title_3 {
            font-size: 22px;
            max-width: 400px;
        }
    }

    .header {
        position: sticky;
        top: 0;
        width: 100%;
        height: 66px;
        z-index: 100;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:  0 20px;
        box-sizing: border-box;
        background-color: #343a40;

        .left {}
        .right {
            display: flex;
            align-items: center;
            .item {
                font-size: 20px;
                color: #FFF;
                padding: 0 14px;
                cursor: pointer;
            }
        }
    }

    .introduce {
        // mix-height: 100vh;
        // min-height: ceil(100vh - 66px);
        padding-bottom: 100px;
        // background: url("../../assets/imgs/banner-bg.jpg") no-repeat center;
        background: linear-gradient(to bottom, #6f7275 0%, #31353a 100%);
        .content {
            display: flex;
            padding-top: 50px;
            padding-bottom: 50px;
            .item {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 20px;
               
                .circular {
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    // background: #345;
                    background: #474b4f;
                    border: 2px solid #b8b29c;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                h2 {
                    color: #F4D03F;
                    margin: 20px 0 10px;
                }
                
                .item_text {
                    color: #FFF;
                    font-size: 15px;
                    font-family: microsoft yahei, sans-serif;
                    margin-bottom: 8px;
                }
            }
        }
        
    }
    // 第三屏幕 职业技能
    .skill {
        min-height: 100vh;
        background: url("../../assets/imgs/file-bg.jpg") no-repeat;
        // background: url("../../assets/imgs/bg-4.jpg") no-repeat;
        background-size: cover;
        background-position: center center;
        padding-bottom: 40px;
        // background: #F00;
        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .item {
                width: 220px;
                height: 300px;
                list-style-type :none; 
                position: relative;
                transition: all 2s;
                color: #FFF;
                margin: 20px 14px;
                .just,
                .back {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    transition: all 2s;
                    box-shadow: 0 0 10px #48f, inset 0 0 10px #48f;
                    border-radius: 10px;
                    background-image: linear-gradient(60deg,rgba(41,50,60,.8),rgba(72,85,99,.8));
                    backface-visibility: hidden;//=====>>>>设置方面不显示(如果旋转了180 则会隐藏)
                }
                .just {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .title {
                        margin-top: 20px;
                    }
                }
                .back {
                    transform: rotateY(180deg);//沿着Y轴旋转180，后就是反面
                    padding: 14px 14px 14px 28px;
                    li {
                        line-height: 2;
                        font-size: 14px;
                    }
                }
            }
            .item:hover {
                .just {
                    transform: rotateY(180deg);
                }
                .back {
                    transform: rotateY(0)
                }
            }

        }
    }

    // 第四屏 工作经验
    .experience {
        min-height: 100vh;
        // background: url("../../assets/imgs/interest-bg.jpg") no-repeat;
        background: url("../../assets/imgs/bg-2.jpg") no-repeat;
        background-size: cover;
        background-position: center center;
        // background: #F00;
        .content {
            padding-top: 30px;
            padding-bottom: 30px;
            >ul {
                >li {
                    list-style-type: none;
                    display: flex;
                    justify-content: center;
                    .left,
                    .right {
                        width: 340px;
                        color: #FFF;
                        // min-height: 100px;
                        height: max-content;
                        // background: chocolate;
                        position: relative;
                        background-image: linear-gradient(60deg,#29323c,#485563);
                        border-radius: 10px;
                        .wrapper {
                            padding: 14px;
                            line-height: 1.8;
                            p {
                                color: #48f;
                            }
                            ul {
                                padding: 0 14px;
                            }
                        }
                        .arrow {
                            display: block;
                            width: 0px;
                            height: 0px;
                            border-top: 14px solid transparent; // 白色
                            border-bottom: 14px solid transparent;//白色
                            position: absolute;
                            top: 14px;
                        }
                    }
                    .center {
                        position: relative;
                        width: 54px;
                        .circular {
                            width: 50px;
                            height: 50px;
                            border: 2px solid #393c3e;
                            border-radius: 50%;
                            background: #FFF;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 10;
                        }
                        .line {
                            width: 2px;
                            height: 100%;
                            background: #2e3742;
                            position: absolute;
                            top: 0;
                            left: 50%;
                            z-index: 4;
                        }
                    }
                    .left {
                        margin-right: 22px;
                        .arrow {
                            border-left: 14px solid #2e3742;//三角形的颜色
                            right: -14px;
                        }
                        .wrapper {
                            text-align: right;
                            ul {
                                // display: inline-block;
                                // display: flex;
                                // flex-direction: column;
                                // align-items: flex-end;
                                li {
                                    list-style-type: none;
                                    position: relative;
                                }
                                li:after {
                                    content: "";
                                    width: 3px;
                                    height: 3px;
                                    display: inline-block;
                                    border-radius: 50%;
                                    border: 1px solid #FFF;
                                    position: absolute;
                                    right: -13px;
                                    top: 40%;
                                    // background: #FFF;
                                }
                            }
                        }
                        
                    }
                    .right {
                        margin-left: 22px;
                        .arrow {
                            border-right: 14px solid #2e3742;//三角形的颜色
                            left: -14px;
                        }
                    }
                }
            }
            >ul li:last-child .center .line {
                display: none;
            }
        }
    }

    //第五屏 项目经验
    .project {
        min-height: 100vh;
        // background: #F00;
        padding-bottom: 40px;
        background: url("../../assets/imgs/bg-3.jpg") no-repeat;
        background-size: cover;
        background-position: center center;
        .content {
            .tabs {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .tab {
                    font-size: 16px;
                    color: #333;
                    padding: 6px 16px;
                    cursor: pointer;
                    border-radius: 6px;
                    &.active {
                        // color: #FFF;
                        background: #F4D03F;
                    }
                }
                .line {
                    width: 1px;
                    height: 20px;
                    background-color: #000;
                    margin: 0 20px;
                }
            }
            .ul {
                display: flex;
                flex-wrap: wrap;
                padding-top: 10px;
                // justify-content: center;
                .li {
                    width: 272px;
                    height: 288px;
                    // border: 1px solid #F99;
                    // background-color: #e3e3e3;
                    margin-right: 20px;
                    margin-top: 20px;
                    list-style-type: none;
                    transition: all .3s;
                    position: relative;
                    .cover {
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                        object-fit: cover;
                    }
                    .mask {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        background: rgba(0, 0, 0, 0.5);
                        display: none;
                        color: #FFF;
                        .preject-des {
                            padding-left: 26px;
                            padding-top: 16px;
                            font-size: 14px;
                            line-height: 1.5;
                            .item {
                                p {
                                    word-break: break-all;
                                    padding-right: 20px;
                                }
                                .des-list {
                                    padding-left: 16px;
                                    .des-item {
                                        word-break: break-all;
                                        padding-right: 20px;
                                    }
                                }
                            }
                        }
                    }
                }
                .li:nth-child(4n+4) {
                    margin-right: 0;

                }
                .li:hover {
                    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
                    transform: translateY(-14px);
                    .mask {
                        display: block;
                    }
                }
            }
        }
    }

    //第六屏 个人作品
    .works {
        min-height: 100vh;
        // background: #F00;
        .content {
            padding-bottom: 40px;
            .ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding-top: 10px;
                .li {
                    width: 480px;
                    height: 288px;
                    // border: 1px solid #F99;
                    // background-color: #e3e3e3;
                    // margin-right: 20px;
                    margin-top: 28px;
                    list-style-type: none;
                    transition: all .3s;
                    position: relative;
                    .cover {
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                        object-fit: cover;
                    }
                    .mask {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        background: rgba(0, 0, 0, 0.5);
                        display: none;
                        color: #FFF;
                        .title {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            padding: 0 20px;
                            text-align: center;
                        }
                    }
                }
                
                .li:hover {
                    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
                    transform: translateY(-14px);
                    .mask {
                        display: block;
                    }
                }
            }
        }
    }

    //第六屏 个人作品
    .board {
        min-height: 100vh;
        background: #FF0;
    }


}
</style>
